<template>

  <div class="container">
    <div id="scroll" v-infinite-scroll="getMyCollection" style="overflow:auto;height:100%" infinite-scroll-distance="30"
         infinite-scroll-delay="500"
         infinite-scroll-immediate="false"
         :infinite-scroll-disabled="finished">
      <div style="display: flex;flex-wrap: wrap;background-color: white;">
        <div @click="toDetail(item.movieId)" v-for="item in list" style="border:1px dotted #dedede;width:50%;    box-sizing: border-box;
            -webkit-box-sizing: border-box;padding:30px 20px 20px 20px;position: relative;
            -moz-box-sizing: border-box; display: flex;flex-direction: column;justify-content: center;align-items: center">
          <img style="width:90%;height:200px" :src="item.imgUrl" :onerror="errorimg"/>
          <div class="title">{{item.title}}
          </div>
          <div class="score">{{item.scoreDouban|scoreFilter}}</div>
        </div>
      </div>
      <div v-if="loading" style="text-align: center;padding:8px;color:#919191;font-size: 14px">加载中...</div>
      <div v-if="finished" style="text-align: center;padding:8px;color:#919191;font-size: 14px">没有更多了</div>
      <div v-if="err" @click="getMyCollection" style="text-align: center;padding:8px;color:#919191;font-size: 14px">
        加载失败，点击重试
      </div>
    </div>
  </div>
</template>

<script>
  import {page} from '@/api/movieCollection'
  import Bus from '@/utils/bus';

  export default {
    name: 'Collection',
    activated() {
      document.getElementById('scroll').scrollTop = this.scrollTop // 设置滚动条位置
    },
    mounted() {
      Bus.$on('refresh', () => {
        this.refresh();
      });
    },
    computed: {},
    data() {
      return {
        scrollTop: 0,
        errorimg: 'this.src="' + require('@/assets/err_img.png') + '"',
        loading: false,
        finished: false,
        err: false,
        query: {
          curPage: 1,
          pageSize: 20,
        },
        list: []
      }
    },
    filters: {
      scoreFilter(score) {
        if (score === null || score === '') {
          return "未知";
        } else {
          return score;
        }
      }
    },
    created() {
      this.getMyCollection();
    },

    methods: {
      refresh() {
        if(document.getElementById('scroll')) {
          document.getElementById('scroll').scrollTop = 0;
        }
        this.list = [];
        this.query.curPage = 1;
        this.loading = false;
        this.finished = false;
        this.getMyCollection();
      },
      getMyCollection() {
        console.log("执行")
        if (this.finished || this.loading) {
          return;
        }
        this.err = false;
        this.finished = false;
        this.loading = true;
        this.query.themeId = this.themeId;
        page(this.query).then(r1 => {
          this.query.curPage++;
          this.list = this.list.concat(r1.data.records);

          if (this.list.length >= r1.data.total) {
            this.finished = true;
          }
          this.loading = false;
        }).catch(err => {
          this.loading = false;
          this.err = true;
          console.log("失败", err)
        })
      },
      toDetail(id) {
        this.scrollTop = document.getElementById('scroll').scrollTop
        this.$router.push({path: '/movie/detail/' + id})
      },


    }
  }
</script>

<style scoped>
  .container {
    height: calc(100vh - 60px);
    background-color: white;
    margin-top: 60px;
  }

  .score {
    font-size: 16px;
    position: absolute;
    right: 30px;
    top: 205px;
    background-color: #99CC33;
    color: white;
    width: 50px;
    border-radius: 10px;
    text-align: center;
    height: 22px;
    line-height: 22px;
  }

  .title {
    margin-top: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    width: 100%;
    text-align: center;
    overflow: hidden;
    height: 40px;
  }
</style>
